import React, { Component } from 'react';
import { connect } from 'react-redux';

import { addPerson } from '../../redux/actions/person'

class PersonUI extends Component {

  state = ({
    personList: [
      {
        name: '小王',
        age: 20
      },
      {
        name: '小李',
        age: 23
      }
    ]
  })

  inp1Ref = React.createRef();
  inp2Ref = React.createRef();

  handleClick = () => {
    const name  = this.inp1Ref.current.value;
    const age = this.inp2Ref.current.value;

    const personObj = {
      name,
      age
    }
    this.props.addPerson(personObj);

    // this.setState((state) => {
    //   return {
    //     personList: [
    //       {
    //         name,
    //         age
    //       },
    //       ...state.personList
    //     ]
    //   }
    // })
  }

  render() {
    return (
      <div>
        <h1>组件Person</h1>
        <h2>来自兄弟组件Count的值：{ this.props.count }</h2>
        <input ref={ this.inp1Ref } type="text" placeholder='请输入名字：' />
        <input ref={ this.inp2Ref }  type="text" placeholder='请输入年龄：' />
        <button onClick={ this.handleClick }>添加</button>
        <ul>
          {
            this.props.person.map((p,index) => {
              return <li key={index}> 姓名：{p.name}，年龄：{p.age} </li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(state => {
  console.log(state);
  return {
    person: state.person,
    count: state.count
  }
}, {
  addPerson
})(PersonUI);